<template>
	<view style="flex: 1 1 auto;">
		<view v-if="isShowTitle" class="padding-top text-lg text-black text-bold margin-tb">{{title}}</view>
		<!--分类 -->
		<view v-if="isShowTitle && isShowClassify" v-for="(item,index) in list"  :key="index" class="grid text-center" :class="'col-'+item.col" :style="item.col==2 ? 'padding:0 100upx' : ''">
			<view v-for="(child,i) in item.list" :key="i" style="padding:20upx 0" @tap="bindClick(child.url)">
				<a href="javascript:void(0)" class="text-gray" style="text-decoration: none;out-line: none">
					<image v-if="child.show" style="width:4em;height:4em;" :lazy-load="true" :src="`https://statics.xmcsrv.net/weixin/cloud/${pathName}/title/${child.icon}.svg`" mode="aspectFill"></image>
					<image v-else style="width:4em;height:4em;" :lazy-load="true" :src="`https://statics.xmcsrv.net/weixin/cloud/${pathName}/title/${child.url}.svg`" mode="aspectFill"></image>
					<view style="font-size:24upx" >
						{{child.title}}
					</view>
				</a>	
			</view>
		</view>
		<!-- 内容 -->
		<view v-for="(item,indexs) in contents" :key="indexs"  :id="'ad-'+item.url" class="margin-tb-lg">
			<!-- 图片和内容 -->
			<view class=" padding-tb-xs">
				<view class="text-df text-bold margin-tb-xs">{{item.title}}</view>
				<view class="ft14 text-gray margin-bottom" style="line-height: 1.5;">{{item.text}}</view>
			</view>
			<image v-if="item.show" style="width:100%!important" :lazy-load="true" :src="`https://statics.xmcsrv.net/weixin/cloud/${pathName}/zh/gifs/${item.url}`" mode="widthFix"></image>
			<image v-else style="width:100%!important" :lazy-load="true" :src="`https://statics.xmcsrv.net/weixin/cloud/${pathName}/zh/gifs/${item.url}.png`" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		isShowTitle:{
			type:Boolean,
			default:true,
		},
		isShowClassify:{
			type:Boolean,
			default:true,
		},
		// 标题
		title:{
			type:String,
			default:''
		},
		// 类型列表
		list:{
			type:Array,
			default:()=>{
				return []
			}
		},
		// 图片路径名称
		pathName:{
			type:String,
			default:''
		}
	},
	data() {
	    return {
			state:{},
			contents:[],
			scrollTops:null
		}
	},
	watch: {
		list: {
			handler: function (newVal) {
				let arr = []
				if(newVal.length>0){
					newVal.forEach(t=>{
						t.list.forEach(z=>{
							arr.push(z);
						})
					})
				}
				this.contents=arr
				console.log('contents',this.contents)
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		bindClick(url){
			let ids= '#ad-'+url;
			const query = wx.createSelectorQuery().in(this)
			query.selectViewport().scrollOffset();
			query.select(ids).boundingClientRect();
			query.exec(function(res){
				wx.pageScrollTo({
					scrollTop:res[0].scrollTop+res[1].top,
					duration:100,
				})
			})
		}
	}
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
